<template>
	<view class="banner">
		<custom-head-top>
			<template #left>
				首页海报
			</template>
			<template #right>
				<button size="mini" type="primary" @click="handleAdd">
					<uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
					<text>新增海报</text>
				</button>
			</template>
		</custom-head-top>
		
		<view class="main">
			<uni-table ref="tableRef" stripe border emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="left" width="180">缩略图</uni-th>
					<uni-th align="left">排序</uni-th>
					<uni-th align="left">跳转地址</uni-th>
					<uni-th align="left">跳转方式</uni-th>
					<uni-th align="left">appid</uni-th>
					<uni-th align="left">是否启用</uni-th>
					<uni-th align="left">发布者</uni-th>
					<uni-th align="left">发布时间</uni-th>
					<uni-th align="left">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in bannerData" :key="item._id">
					<uni-td>
						<image class="thumb" :src="getSmallImg(item.picurl, 200)" mode="aspectFill"></image>
					</uni-td>
					<uni-td>{{item.sort}}</uni-td>
					<uni-td>{{item.url}}</uni-td>
					<uni-td>
						<uni-tag text="站内" v-if="item.target == 'self'" inverted type="success" size="mini"></uni-tag>
						<uni-tag text="站外" v-if="item.target == 'miniProgram'" inverted type="warning" size="mini"></uni-tag>
					</uni-td>
					<uni-td>{{item.appid}}</uni-td>
					<uni-td>
						<switch checked="true" @change="checkedChange($event, item._id)" :checked="item.checked" style="transform: scale(0.6);transform-origin: left center;" />
					</uni-td>
					<uni-td>{{item.nickname}}</uni-td>
					<uni-td>{{dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss")}}</uni-td>
					<uni-td>
						<view class="operate-btn-group">
							<button size="mini" type="primary" plain @click="update(item._id)">修改</button>
							<button size="mini" type="warn" plain @click="remove(item._id)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
	
	<BannerPopue ref="popueRef" @success="getData()" :item="item"></BannerPopue>
	
</template>

<script setup>
import { ref } from 'vue';
import BannerPopue from './children/BannerPopue.vue';
import { getSmallImg } from '../../utils/tools';
import { showToast } from '../../utils/common';
import dayjs from "dayjs"
const activityCloudObj = uniCloud.importObject('admin-activity-banner');

const tableRef = ref(null);
const popueRef = ref(null);
const bannerData = ref([]);

//打开添加窗口
const handleAdd = () => {
	popueRef.value.open();
}


//获取列表数据
const getData = async() => {
	let {errCode, data} = await activityCloudObj.list();
	bannerData.value = data;
}


//启用状态变换
const checkedChange = async(e, id) => {
	try{
		uni.showLoading({mask:true});
		let {errCode, errMsg} = await activityCloudObj.update({_id:id, checked:  e.detail.value});
		if(errCode != 0) showToast({title: errMsg});
		showToast({title:'修改成功'})
		getData();
	} catch(e) {
		console.log(err);
	}finally{
		uni.hideLoading();
	}
	
}

//编辑功能
const update = async(id)=> {
	popueRef.value.open()
}
getData();
</script>


<style lang="scss" scoped>
.main {
	padding: 20px;
	.thumb{
		width: 150px;
		height: 80px;
	}
}
</style>
